
@include('Admin.public.head')
<style type="text/css">
    #my-popup2 {
        max-height: 320px;}
    #my-popup {max-height: 600px;}
    .tpys{
        width:100px;
    }
    #img_max{
        width:80%;
    }
    #img_max1{
        height: 50px;
        overflow: hidden;
    }
    #img_max:active{
        position: fixed;
        width: 300px;
        top:250px
    }
    
</style>
<body>
@include('Admin.public.menu')
<div class=" admin-content" id="app">
    {{ csrf_field() }}
    <div class="daohang">
    </div>
    <!--添加模态框-->

    <div class="admin-biaogelist">
        <div class="listbiaoti am-cf">
            <ul class="am-icon-users"> 会员充值管理</ul>

            <dl class="am-icon-home" style="float: right;">当前位置： 首页 > <a href="#">会员充值审核列表</a></dl>
            <!--这里打开的是新页面-->
        </div>
        <div class="am-btn-toolbars am-btn-toolbar am-kg am-cf">
            <ul>

                <!-- {{--<li>--}}
                {{--<div class="block">--}}
                {{--<el-date-picker--}}
                {{--v-model="keyword.created_at"--}}
                {{--type="daterange"--}}
                {{--value-format="yyyy-MM-dd"--}}
                {{--range-separator="~"--}}
                {{--start-placeholder="开始日期"--}}
                {{--end-placeholder="结束日期">--}}
                {{--</el-date-picker>--}}
                {{--</div>--}}
                {{--</li>--}} -->

                <li>
                    <template>
                        <el-select v-model="keyword.status" placeholder="审核状态">
                            <el-option
                                    size="medium"
                                    v-for="item in ordertype"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </li>

                <li>
                    <el-input v-model="keyword.keyword" class="keywords" placeholder="关键词搜索"></el-input>
                </li>
                <li>
                    <el-button type="primary" v-on:click="changeClick()">搜索</el-button>
                </li>
                <li> <el-button type="danger" v-on:click="resetOrder()">重置</el-button></li>
            </ul>
        </div>
       
        <form class="am-form am-g">
            <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
                <thead>
                <tr class="am-success">
                    <th class="table-id">ID</th>
                    <th class="table-title">账号</th>
{{--                    <th class="table-title">手机号</th>--}}
                    <th class="table-title">姓名</th>
                    <th class="table-title">金额</th>
                    <th class="table-title">状态</th>
                    <th class="table-date am-hide-sm-only">凭证</th>
                    <th class="table-date am-hide-sm-only">申请时间</th>
                    <th class="table-date am-hide-sm-only">审核人</th>
                    <th class="table-date am-hide-sm-only">审核时间</th>
                    <th width="130px" class="table-set">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr class="nr" v-for="val,index in ApplyList">
                    <td>@{{ val.id }}</td>
                    <td>@{{ val.name }}</td>
{{--                    <td>@{{ val.phone }}</td>--}}
                    <td>@{{ val.user_name }}</td>
                    <td>@{{ val.recharge_money }}</td>
                    <td v-show="val.status == 0" >待审核</td>
                    <td v-show="val.status == 1" style="color: green;">已通过</td>
                    <td v-show="val.status == 2" style="color: red;">已拒绝</td>
{{--                    <td v-show="val.status == 3" style="color: red;">已回收</td>--}}
                    <td class="tpys" >
                        <div id="img_max1">
                            <img id="img_max"     :src="val.front_id_card">
                        </div>
                    </td>
                    <td>@{{ val.created_at }}</td>
                    <td>@{{ val.auditor }}</td>
                    <td>@{{ val.audit_time }}</td>
                    <!-- {{--<td>--}}
                    {{--<span v-on:click="editType(val.uid,index)" v-show="val.type == 1" title="正常登陆" style="cursor: pointer;"><i class="am-icon-check"></i></span>--}}
                    {{--<span v-on:click="editType(val.uid)" v-show="val.type == 0" title="已禁用" style="cursor: pointer;"><i class="am-icon-close"></i></span>--}}
                    {{--</td>--}} -->
                    <td style="width:250px;">
                        <div class="am-btn-toolbar">
                            <div class="am-btn-group am-btn-group-xs">
                                <a class="am-btn am-btn-success am-radius" v-show="val.status == 0"  v-on:click="approve(val.id)" title="审核通过">通过</a>
                                <a class="am-btn am-btn-secondary" v-show="val.status == 0"  v-on:click="reject(val.id)" title="拒绝通过">拒绝</a>
                                <a class="am-btn am-btn-warning" v-show="val.status == 1"    title="已完成">已完成</a>
                                <a class="am-btn am-btn-danger am-radius" v-show="val.status == 2"  title="拒绝" >已拒绝</a>
{{--                                <a class="am-btn am-btn-danger am-radius" v-show="val.status == 3"  title="拒绝" >已回收</a>--}}
{{--                                <a class="am-btn am-btn-danger am-radius" v-show="val.status == 3"  title="开通"  v-on:click="back(val.id)" >开通</a>--}}
                                {{--<a class="am-btn am-btn-danger am-radius" v-show="val.status == 1" data-am-modal="{target: '#my-popup'}" v-on:click="doEditor(val)" title="拒绝" >编辑</a>--}}
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
            <!--分页-->
            <ul class="am-pagination am-fr">
                <div class="block">
                    <el-pagination
                            background
                            :page-size="PagesData.per_page"
                            :current-page = "PagesData.current_page"
                            layout="total , prev, pager, next"
                            :total="PagesData.total"
                            @prev-click="changeClick"
                            @next-click="changeClick"
                            @current-change="changeClick">
                    </el-pagination>
                </div>
            </ul>
            

        </form>
        <script src="{{ URL::asset('js/address/distpicker.data.js') }}"></script>
        <script src="{{ URL::asset('js/address/distpicker.js') }}"></script>
        <script>
           
            
            var app = new Vue({
                el:"#app",
                data: {
                    ApplyList : [], //代理商列表
                    PagesData:[],//分页
                    ordertype: [{
                        value: '0',
                        label: '待审核'
                    }, {
                        value: '1',
                        label: '通过'
                    },{
                        value: '2',
                        label: '拒绝'
                    },{
                        value: '3',
                        label: '回收'
                    }],
                    keyword:{ //关键字搜索
                        type:'',
                        status:'',
                        keyword:'',
                        // created_at:'',
                    },

                },

                //事件
                methods: {
                    
                    //选择当前页
                    changeClick:function(e){
                        var rico = this
                        $.get("/admin/members/examine",{'_token':'{{csrf_token()}}',class:'select',page:e,keyword:app.keyword},function (res) {
                            if(res.code){
                                app.ApplyList = res.data.data
                                app.PagesData = res.data
                            } else {
                                layer.msg(res.data);
                            }
                        });
                    },

                    initialize:function () {
                        var rico = this
                        //代理商列表
                        $.get("/admin/members/examine",{'_token':'{{csrf_token()}}',class:'select'},function (res) {
                            if(res.code){
                                app.ApplyList = res.data.data
                                app.PagesData = res.data
                            } else {
                                layer.msg(res.data);
                            }
                        });

                    },
                    // {{--//添加区县--}}
                    // {{--doDistrict:function () {--}}
                    //     {{--app.address.districts = (app.address.districts == '')?app.address.district:app.address.districts+','+app.address.district--}}
                    // {{--},--}}
                    // {{--//代理申请--}}
                    // {{--doApply:function(){--}}
                    //     {{--var rico = this--}}
                    //     {{--if(!(/^[1][3,4,5,7,8,9][0-9]{9}$/.test(app.address.phone))){--}}
                    //         {{--layer.msg('请输入正确的电话号码');--}}
                    //         {{--return false;--}}
                    //     {{--}--}}
                    //     {{--// if(app.address.districts == ''){--}}
                    //     {{--//     layer.msg('区域不能为空');--}}
                    //     {{--//     return false;--}}
                    //     {{--// }--}}
                    //     {{--$.post("/admin/members/doApply", {'_token': '{{csrf_token()}}','class':'apply',address:app.address}, function (res) {--}}
                    //         {{--if (res.code) {--}}
                    //             {{--layer.msg(res.data);--}}
                    //             {{--app.address.districts = '';--}}
                    //             {{--rico.initialize();--}}
                    //         {{--} else {--}}
                    //             {{--layer.msg(res.data);--}}
                    //         {{--}--}}
                    //     {{--});--}}
                    // {{--},--}}

                    //审核通过
                    approve:function (id) {
                        var that = this;
                        $.get("/admin/members/examine",{'_token':'{{csrf_token()}}',class:'edit',id:id},function (res) {
                            if(res.code){
                                layer.msg(res.data,{icon: 6},function () {
                                    // location.reload();
                                    that.initialize();
                                },500);
                            }
                        });
                    },
                    //拒绝
                    reject:function(id) {
                        var that = this;
                        $.get("/admin/members/examine",{'_token':'{{csrf_token()}}',class:'reEdit',id:id},function (res) {
                            if(res.code){
                                layer.msg(res.data,{icon: 6},function () {
                                    // location.reload();
                                    that.initialize();
                                },500);
                            }
                        });
                    },
                    //开通
                    back:function(id) {
                        var that = this;
                        $.get("/admin/members/examine",{'_token':'{{csrf_token()}}',class:'back',id:id},function (res) {
                            if(res.code){
                                layer.msg(res.data,{icon: 6},function () {
                                    // location.reload();
                                    that.initialize();
                                },500);
                            }
                        });
                    },

                    //重置
                    resetOrder:function(){

                        location.reload();
                    }
                },

                //自动执行
                mounted: function () {
                    this.initialize();//分公司
                },
            })
        </script>
@include('Admin.public.foot')